<!--  -->
<template>
  <basic-container class="body">
    <div class='home'>
      <div
        class="center"
        id="center"
      >
        <!-- <template v-for="(item,index) in centerVo">
          <div
            :class="'centeritem centeritem'+index"
            :id="'centeritem'+index"
            :key="index"
          >
            <el-popover
              placement="right-start"
              width="200"
              trigger="hover"
              popper-class="popoverItem"
            >
              <template>
                <div class="popoverContent">
                  <div style="text-align:center;">{{item.name}}</div>
                  <div class="item">
                    <span>应收总金额：</span>
                    <span>{{item.receivable}}</span>
                  </div>
                  <div class="item">
                    <span>已收总金额：</span>
                    <span>{{item.received}}</span>
                  </div>
                  <div class="item">
                    <span>已租：</span>
                    <span>{{item.haveRent}}</span>
                  </div>
                  <div class="item">
                    <span>未租：</span>
                    <span>{{item.notRent}}</span>
                  </div>
                  <div class="item">
                    <span>已售：</span>
                    <span>{{item.sold}}</span>
                  </div>
                  <div class="item">
                    <span>未售：</span>
                    <span>{{item.unsold}}</span>
                  </div>
                </div>

              </template>
              <div
                slot="reference"
                class="area"
              >

              </div>
            </el-popover>
          </div>
        </template> -->
        <div class="test">
          <template v-for="(item,index) in centerVo">
            <el-popover
              placement="right-start"
              width="200"
              trigger="hover"
              popper-class="popoverItem"
              :key="index"
            >
              <template>
                <div class="popoverContent">
                  <div style="text-align:center;">{{item.name}}</div>
                  <div class="item">
                    <span>应收总金额(元)：</span>
                    <span>{{item.receivable}}</span>
                  </div>
                  <div class="item">
                    <span>已收总金额(元)：</span>
                    <span>{{item.received}}</span>
                  </div>
                  <div class="item">
                    <span>已租：</span>
                    <span>{{item.haveRent}}</span>
                  </div>
                  <div class="item">
                    <span>未租：</span>
                    <span>{{item.notRent}}</span>
                  </div>
                  <div class="item">
                    <span>已售：</span>
                    <span>{{item.sold}}</span>
                  </div>
                  <div class="item">
                    <span>未售：</span>
                    <span>{{item.unsold}}</span>
                  </div>
                </div>

              </template>
              <div
                slot="reference"
                :class="'divBox'+index"
              >

              </div>
            </el-popover>
          </template>

        </div>
      </div>
      <div class="home-left">
        <div class="home-left-item">
          <div>
            <span>园区总面积(㎡)：{{leftVo.totalArea}}</span>
            <span></span>
          </div>
          <div>
            <span>已入驻商家：{{leftVo.merchant}}</span>
            <span></span>
          </div>
        </div>
        <div class="home-left-item">
          <div>
            <span>园区应收总金额(元)：{{leftVo.receivable}}</span>
            <span></span>
          </div>
          <div>
            <span>园区已收总金额(元):{{leftVo.received}}</span>
            <span></span>
          </div>
        </div>
        <div
          class="home-left-item"
          id="home-left-item"
        >
          <div
            class="item"
            ref="item1"
          >
            <span> 进出场车辆统计(台)：{{leftVo.inOutCars}}</span>
            <span></span>
          </div>
          <div
            class="item home-left-item-children"
            ref="item2"
          >
            <span>今日进场车辆(台)：{{leftVo.inCars}}</span>
            <span></span>
          </div>
          <div
            class="item home-left-item-children"
            ref="item3"
          >
            <span>今日出场车辆(台):{{leftVo.outCars}}</span>
            <span></span>
          </div>
          <div
            id="linechart"
            class="linechart"
          ></div>
        </div>
      </div>
      <div class="home-right">
        <div>
          <p style="margin:10px 5px !important;">房产数据统计</p>
          <div
            id="percentchart"
            class="percentchart"
          ></div>
        </div>
        <div
          v-for="(item,index) in rightVo.list"
          :key="index"
        >
          <p style="margin:5px 5px !important;"><span>{{item.name}}:</span></p>
          <p class="itemsclass">
            <span>应收总金额(元):{{item.receivable}}</span>
            <span>已收总金额(元):{{item.received}}</span>
            <span v-if="item.haveRent>0">已租:{{item.haveRent}}</span>
            <span v-if="item.notRent>0">未租:{{item.notRent}}</span>
            <span v-if="item.sold>0">已售:{{item.sold}}</span>
            <span v-if="item.unsold>0">未售:{{item.unsold}}</span>
          </p>
        </div>
      </div>
    </div>
  </basic-container>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { Chart } from '@antv/g2'
import { Index } from '@/api/index/index'
import elementResizeDetectorMaker from "element-resize-detector"
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      data: [],
      HomeRight: [
        { name: '综合楼' },
        { name: '展场' },
        { name: '形象店' }
      ],
      leftVo: {

      },
      rightVo: {

      },
      centerVo: {

      },
      countIndex: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.countIndex = 0
    const _this = this;
    const erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById("center"), element => {
      _this.$nextTick(() => {
        //监听到事件后执行的业务逻辑
        var width = element.offsetWidth
        var height = element.offsetHeight
        console.log(width + " ----- " + height)
        if (width > 1620) {
          // 待写
        } else if (width > 640 && width <= 1620) {
          if (height >= 792 && width > 1300) {

          } else {

          }
        } else if (width <= 640) {

        } else if (width <= 400) {

        }
        console.log("Size: " + width + "x" + height)
      });
    });
    Index().then(res => {
      this.leftVo = res.data.data.leftVo
      this.rightVo = res.data.data.rightVo
      let oldCenterVo = res.data.data.centerVo
      let vo0 = oldCenterVo[0]
      let vo1 = oldCenterVo[1]
      oldCenterVo.splice(0, 1, vo1)
      oldCenterVo.splice(1, 1, vo0)
      this.centerVo = oldCenterVo
      let data = []
      // this.leftVo.inChart = [{ count: 1, date: '9/15' }, { count: 1, date: '9/16' }]
      // this.leftVo.outChart = [{ count: 2, date: '9/15' }, { count: 3, date: '9/16' }]
      for (var i = 0; i < this.leftVo.inChart.length; i++) {
        this.leftVo.inChart[i].type = "进场车辆"
        this.leftVo.outChart[i].type = "出场车辆"
        // this.leftVo.outChart[i].count = this.leftVo.outChart[i].count + 1
        data.push(this.leftVo.inChart[i])
        data.push(this.leftVo.outChart[i])
      }
      let item1 = this.$refs.item1.offsetHeight
      let item2 = this.$refs.item2.offsetHeight
      let item3 = this.$refs.item3.offsetHeight
      let chartheight = parseInt(document.getElementById("home-left-item").offsetHeight - item1 - item2 - item3 - 30)
      let chartwidth = document.getElementById("home-left-item").offsetWidth - 20
      // Step 1: 创建Chart对象
      const chart = new Chart({
        container: 'linechart',
        autoFit: true,
        width: chartwidth,
        height: chartheight,
        padding: [15, 0, 25, 0],
      })
      chart.data(data);
      chart.scale({
        month: {
          range: [0, 1],
        },
        temperature: {
          nice: true,
        },
      });

      chart.tooltip({
        showCrosshairs: true,
        shared: true,
        showTitle: false,
      });
      chart
        .line()
        .position('date*count')
        .color('type')

      chart
        .point()
        .position('date*count')
        .color('type')

      chart.axis('date', {
        label: {
          show: false,
          style: {
            fill: 'white',
          },
        },
      });
      chart.legend(false)
      chart.render()
      var count = 0
      let data1 = [
        { item: '已租', count: 0, percent: 0 },
        { item: '未租', count: 0, percent: 0 },
        { item: '已售', count: 0, percent: 0 },
        { item: '未售', count: 0, percent: 0 },
      ]
      for (var i = 0; i < this.rightVo.list.length; i++) {
        data1[0].count = data1[0].count + this.rightVo.list[i].haveRent
        data1[1].count = data1[1].count + this.rightVo.list[i].notRent
        data1[2].count = data1[2].count + this.rightVo.list[i].sold
        data1[3].count = data1[3].count + this.rightVo.list[i].unsold
      }
      count = data1[0].count + data1[1].count + data1[2].count + data1[3].count
      data1[0].percent = (data1[0].count / count).toFixed(2)
      data1[1].percent = (data1[1].count / count).toFixed(2)
      data1[2].percent = (data1[2].count / count).toFixed(2)
      data1[3].percent = (data1[3].count / count).toFixed(2)
      const chart1 = new Chart({
        container: 'percentchart',
        autoFit: true,
        height: 150,
        padding: [20, 20, 0, 0]
      });
      chart1.data(data1);
      chart1.legend({
        position: 'right',
        track: {
          style: {
            fontSize: 18,
            fill: 'white',
            textAlign: 'center',
            color: 'white'
          }
        },
        offsetX: 0,
        offsetY: 10
      })
      chart1.scale('percent', {
        formatter: (val) => {
          if (val === 'NaN') {
            val = 0
          }
          val = data1[this.countIndex].item + " " + (parseFloat(val) * 100).toFixed(2) + '%';
          this.countIndex++
          return val;
        }
      });
      chart1.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.6,
      });
      chart1.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
      });
      // 辅助文本
      chart1
        .annotation()
        .text({
          position: ['50%', '50%'],
          content: '',
          style: {
            fontSize: 14,
            fill: '#8c8c8c',
            textAlign: 'center',
          }
        })
        .text({
          position: ['50%', '50%'],
          content: count,
          style: {
            fontSize: 14,
            fill: 'white',
            textAlign: 'center',
          }
        })
      chart1
        .interval()
        .adjust('stack')
        .position('count')
        .color('item')
        .label('percent', {
          style: {
            fill: "white"
          }
        })
        .tooltip('item*percent', (item, percent) => {
          percent = (percent * 100).toFixed(2) + '%';
          return {
            name: item,
            value: percent,
          };
        });

      chart1.interaction('element-active');

      chart1.render();
    })
  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.basic-container {
  position: relative;
  height: 100%;
  width: 100%;
  /deep/.el-card.is-always-shadow {
    background-color: transparent;
    height: 100% !important;
    .el-card__body {
      height: 100%;
      .home {
        // position: relative;
        height: 100%;
        color: white;
        .home-left {
          overflow: hidden;
          position: absolute;
          left: 0px;
          top: 0px;
          bottom: 0px;
          height: 100%;
          width: 300px;
          border: 2px solid black;
          background-color: rgba(0, 0, 0, 0.5);
          .home-left-item {
            padding: 15px;
          }
          .home-left-item:nth-of-type(1) {
            div {
              height: 50%;
              display: flex;
              align-items: center;
            }
            height: 20%;
            border-bottom: 2px solid black;
          }
          .home-left-item:nth-of-type(2) {
            height: 20%;
            border-bottom: 2px solid black;
            div {
              height: 50%;
              display: flex;
              align-items: center;
            }
          }
          .home-left-item:nth-of-type(3) {
            height: 60%;
            .home-left-item-children {
              padding: 15px 0px 0px;
            }
          }
        }
        .home-right {
          position: absolute;
          right: 0px;
          top: 0px;
          bottom: 0px;
          overflow: hidden;
          height: 100%;
          width: 300px;
          border: 2px solid black;
          background-color: rgba(0, 0, 0, 0.5);
        }
        .cener {
          position: relative;
          z-index: 999;
          .centeritem {
            position: absolute;
          }
        }
      }
    }
  }
}
.body {
  background-image: url(../../../assets/img/index.jpg);
  background-size: cover;
}
.center {
  position: relative;
  // z-index: 999;
  // width: 50%;
  width: 100%;
  height: 100%;
  margin: auto;
  .centeritem {
    position: absolute;
  }
  // .centeritem:nth-child(1) {
  //   top: 270px;
  //   left: 33px;
  // }
  // .centeritem:nth-child(2) {
  //   top: 215px;
  //   left: 130px;
  // }
  // .centeritem:nth-child(3) {
  //   top: 379px;
  //   left: 152px;
  // }
  // .centeritem:nth-child(4) {
  //   top: 305px;
  //   left: 241px;
  // }
  // .centeritem:nth-child(5) {
  //   top: 483px;
  //   left: 333px;
  // }
  // .centeritem:nth-child(6) {
  //   top: 400px;
  //   left: 436px;
  // }
  // .centeritem:nth-child(7) {
  //   top: 173px;
  //   left: 284px;
  // }
  // .centeritem:nth-child(8) {
  //   top: 235px;
  //   left: 461px;
  // }
  // .centeritem:nth-child(9) {
  //   top: 296px;
  //   left: 612px;
  // }
  // .centeritem0 {
  //   top: 270px;
  //   left: 33px;
  // }
  // .centeritem1 {
  //   top: 215px;
  //   left: 130px;
  // }
  // .centeritem2 {
  //   top: 379px;
  //   left: 152px;
  // }
  // .centeritem3 {
  //   top: 305px;
  //   left: 241px;
  // }
  // .centeritem4 {
  //   top: 483px;
  //   left: 333px;
  // }
  // .centeritem5 {
  //   top: 400px;
  //   left: 436px;
  // }
  // .centeritem6 {
  //   top: 173px;
  //   left: 284px;
  // }
  // .centeritem7 {
  //   top: 235px;
  //   left: 461px;
  // }
  // .centeritem8 {
  //   top: 296px;
  //   left: 612px;
  // }
}
.itemsclass {
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  margin: 10px 0 !important;
  flex-wrap: wrap;
  span {
    width: 50%;
    font-size: 15px;
    padding: 2px 0px;
  }
  span:nth-child(2n) {
    padding-left: 5px;
    box-sizing: border-box;
  }
}
.area {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.area:before {
  content: "";
  position: absolute;
  z-index: 99;
  top: 14px;
  left: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffffff;
  -webkit-animation: circleScale1 2s linear infinite;
  -moz-animation: circleScale1 2s linear infinite;
  -ms-animation: circleScale1 2s linear infinite;
  animation: circleScale1 2s linear infinite;
}
// 公共眩晕动态效果 circleScale1 代表变量
@keyframes circleScale1 {
  0% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0;
  }
  25% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0.3;
  }
  75% {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(2);
    -webkit-transform: scale(2);
    opacity: 0;
  }
}
@media screen and (min-width: 640px) and (max-width: 1620px) {
  // .centeritem0 {
  //   top: 272px;
  //   left: 343px;
  // }
  // .centeritem1 {
  //   top: 216px;
  //   left: 438px;
  // }
  // .centeritem2 {
  //   top: 378px;
  //   left: 461px;
  // }
  // .centeritem3 {
  //   top: 304px;
  //   left: 550px;
  // }
  // .centeritem4 {
  //   top: 484px;
  //   left: 641px;
  // }
  // .centeritem5 {
  //   top: 401px;
  //   left: 746px;
  // }
  // .centeritem6 {
  //   top: 174px;
  //   left: 593px;
  // }
  // .centeritem7 {
  //   top: 235px;
  //   left: 770px;
  // }
  // .centeritem8 {
  //   top: 297px;
  //   left: 922px;
  // }
  .test {
    .divBox0 {
      background-color: transparent;
      position: absolute;
      top: 271px;
      left: 318px;
      width: 87px;
      height: 39px;
      transform: rotateZ(-30deg) skewX(30deg);
      // background-color: red;
    }
    .divBox1 {
      background-color: transparent;
      position: absolute;
      top: 215px;
      left: 418px;
      width: 70px;
      height: 39px;
      -webkit-transform: rotateZ(-30deg) skewX(30deg);
      transform: rotateZ(-30deg) skewX(36deg);
      // background-color: red;
    }
    .divBox2 {
      background-color: transparent;
      position: absolute;
      top: 239px;
      left: 531px;
      width: 216px;
      height: 363px;
      -webkit-transform: rotateZ(-30deg) skewX(30deg);
      transform: rotate(-20deg) skewY(-11deg) skewX(37deg);
      // background-color: red;
    }
    .divBox3 {
      background-color: transparent;
      position: absolute;
      top: 37px;
      left: 678px;
      width: 165px;
      height: 429px;
      -webkit-transform: rotateZ(-30deg) skewX(30deg);
      transform: rotate(-20deg) skewY(-20deg) skewX(36deg);
      // background-color: red;
    }
  }
}
// @media screen and (max-width: 640px) {
//   .centeritem0 {
//     top: 282px;
//     left: 357px;
//   }
//   .centeritem1 {
//     top: 224px;
//     left: 456px;
//   }
//   .centeritem2 {
//     top: 394px;
//     left: 479px;
//   }
//   .centeritem3 {
//     top: 316px;
//     left: 573px;
//   }
//   .centeritem4 {
//     top: 502px;
//     left: 667px;
//   }
//   .centeritem5 {
//     top: 414px;
//     left: 774px;
//   }
//   .centeritem6 {
//     top: 180px;
//     left: 617px;
//   }
//   .centeritem7 {
//     top: 245px;
//     left: 800px;
//   }
//   .centeritem8 {
//     top: 309px;
//     left: 956px;
//   }
// }
@media screen and (min-width: 1620px) and (max-width: 1920px) {
  .test {
    .divBox0 {
      position: absolute;
      top: 371px;
      left: 418px;
      width: 112px;
      height: 39px;
      transform: rotateZ(-30deg) skewX(30deg);
      // background-color: red;
    }
    .divBox1 {
      background-color: transparent;
      position: absolute;
      top: 295px;
      left: 548px;
      width: 100px;
      height: 39px;
      -webkit-transform: rotateZ(-30deg) skewX(30deg);
      transform: rotateZ(-30deg) skewX(36deg);
      // background-color: red;
    }
    .divBox2 {
      background-color: transparent;
      position: absolute;
      top: 337px;
      left: 715px;
      width: 286px;
      height: 443px;
      -webkit-transform: rotateZ(-30deg) skewX(30deg);
      transform: rotate(-20deg) skewY(-6deg) skewX(39deg);
      // background-color: red;
    }
    .divBox3 {
      background-color: transparent;
      position: absolute;
      top: 37px;
      left: 928px;
      width: 195px;
      height: 599px;
      -webkit-transform: rotateZ(-30deg) skewX(30deg);
      transform: rotate(-20deg) skewY(-20deg) skewX(36deg);
      // background-color: red;
    }
  }
}
</style>